<template>
  <div id="user-login">
    <el-row>
      <el-col :span="14" :xs="4"></el-col>
      <el-col :span="10" :xs="20">
        <el-card style="max-width: 360px; height: 480px; margin-top: 30px">
          <el-form ref="loginFormRef" :model="loginForm" :rules="loginRules">
            <el-form-item>
              <h3>账号密码登录</h3>
            </el-form-item>
            <el-form-item prop="username">
              <el-input v-model="loginForm.username" placeholder="手机号/邮箱/用户名"></el-input>
            </el-form-item>
            <el-form-item prop="password">
              <el-input
                type="password"
                v-model="loginForm.password"
                placeholder="登陆密码"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" plain style="width: 100%" @click="submitLogin"
                >登陆
              </el-button>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" plain style="width: 100%" @click="submitSet">
                重置
              </el-button>
            </el-form-item>
            <el-form-item prop="agree">
              <el-checkbox v-model="loginForm.agree">阅读并同意隐私政策</el-checkbox>
            </el-form-item>
            <el-form-item>
              <router-link class="router-link" to="/user-register">免费注册</router-link>
            </el-form-item>
          </el-form>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { ElMessage, type FormInstance, type FormRules } from 'element-plus'
import { useCurrentUserStore } from '@/stores/useCurrentUserStore.ts'
import { useRoute } from 'vue-router'

interface LoginForm {
  username: string
  password: string
  agree: boolean
} //数据类型

const loginFormRef = ref<FormInstance>() //一个forminstance的对象

const loginRules = reactive<FormRules<LoginForm>>({
  username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 5, max: 12, message: '密码应在5-12位之间', trigger: 'blur' },
  ],
  // agree:[
  // ]//保证agree必须是同意的状态todo
})
const loginForm = reactive<LoginForm>({
  username: '',
  password: '',
  agree: false,
})

const submitLogin = () => {
  loginFormRef.value?.validate(async (valid) => {
    if (valid) {
      const user = {
        username: loginForm.username,
        password: loginForm.password,
      }
      await loginEvent(user)
    }
  })
}

const currentUserStore = useCurrentUserStore()
const route = useRoute()

async function loginEvent(user: { username: string; password: string }) {
  currentUserStore.userLogin(user.username, user.password, route.query.redirect)
}

const submitSet = () => {
  if (!loginFormRef.value) return
  loginFormRef.value.resetFields()
  ElMessage.success('重置成功')
}
</script>

<style scoped>
#user-login {
  margin: 10px auto;
  width: 100%;
  height: 550px;
  background-image: url('@/assets/login_back.png');
  background-size: cover;
}

#user-login el-card {
  margin-right: 20px;
}
</style>
